<template>
  <j-modal
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :title="title"
    :visible="visible"
    :width="1200"
    switchFullscreen
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button key="submit" type="primary" @click="handleCancel">
        返回
      </a-button>

    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <div style="display: flex;justify-content: space-between;">
          <span>入库日期：{{ model.createTime }}</span>
          <span>入库单编号：{{ model.id }}</span>
        </div>
        <table class="table">
          <tr>
            <td style="min-width: 100px;text-align: center;">供应商名称</td>
            <td>{{ model.supplier }}</td>
            <td style="min-width: 50px;text-align: center;">生产商名称</td>
            <td>{{ model.manufacturer }}</td>
            <td rowspan="3" style="width: 200px;height: 120px;">
              <a-upload
                :file-list="fileList1"
                :showUploadList="{showRemoveIcon:false}"
                list-type="picture-card"
                style="width: 200px;height: 120px;"
                @preview="handlePreview"
              >
              </a-upload>
              <!--              <img :src="appearanceImg" alt style="width:100%; height:100%"/>-->
            </td>
            <td rowspan="3" style="width: 200px;height: 120px;">
              <a-upload
                :file-list="fileList2"
                :showUploadList="{showRemoveIcon:false}"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                list-type="picture-card"
                style="width: 200px;height: 120px;"
                @preview="handlePreview"
              >
              </a-upload>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">车辆存放库房</td>
            <td>{{ model.storeName }}</td>
            <td style="text-align: center;">保管员</td>
            <td>{{ model.storekeeperName }}</td>
          </tr>
          <tr>
            <td style="text-align: center;">车辆vin码</td>
            <td>{{ model.vin }}</td>
            <td style="text-align: center;">合格证号码</td>
            <td>{{ model.certificateNo }}</td>
          </tr>
          <tr>
            <td style="text-align: center;">品牌名称</td>
            <td>{{ model.brand }}</td>
            <td style="text-align: center;">汽车车型</td>
            <td>{{ model.carModel }}</td>
            <td rowspan="3" style="width: 200px;height: 120px;">
              <a-upload
                :file-list="fileList3"
                :showUploadList="{showRemoveIcon:false}"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                list-type="picture-card"
                style="width: 200px;height: 120px;"
                @preview="handlePreview"
              >
              </a-upload>
            </td>
            <td rowspan="3" style="width: 200px;height: 120px;">
              <a-upload
                :file-list="fileList4"
                :showUploadList="{showRemoveIcon:false}"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                list-type="picture-card"
                style="width: 200px;height: 120px;"
                @preview="handlePreview"
              >
              </a-upload>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">车型配置</td>
            <td>{{ model.carTypeConfiguration }}</td>
            <td style="text-align: center;">车辆类型</td>
            <td>{{ model.powerType }}</td>
          </tr>
          <tr>
            <td style="text-align: center;">车辆燃料类型</td>
            <td>{{ model.fuelType }}</td>
            <td style="text-align: center;">车辆颜色</td>
            <td>{{ model.outsideColor }}</td>
          </tr>
          <tr>
            <td style="text-align: center;">内饰颜色</td>
            <td>{{ model.interiorColor }}</td>
            <td style="text-align: center;">发动机型号</td>
            <td>{{ model.engineModel }}</td>
            <td style="text-align: center;">车辆发动机号</td>
            <td>{{ model.engineNo }}</td>
          </tr>
          <tr>
            <td style="text-align: center;">发动机排量</td>
            <td>{{ model.displacement }}</td>
            <td style="text-align: center;">变速箱型号</td>
            <td>{{ model.gearbox }}</td>
            <td style="text-align: center;">车辆轮胎编号</td>
            <td>{{ model.tireNo }}</td>
          </tr>
          <tr>
            <td style="text-align: center;">核定载客量</td>
            <td>{{ model.passengerCapacity }}</td>
            <td style="text-align: center;">功率</td>
            <td>{{ model.motorPower }}</td>
            <td style="text-align: center;">排放标准</td>
            <td>{{ model.emissionStandards }}</td>
          </tr>
          <tr>
            <td style="text-align: center;">轴距</td>
            <td>{{ model.wheelbase }}</td>
            <td style="text-align: center;">额定载质量</td>
            <td>{{ model.loadQuality }}</td>
            <td style="text-align: center;">动力蓄电池组编号</td>
            <td>{{ model.batteryNo }}</td>
          </tr>
          <tr>
            <td style="text-align: center;">随车手续</td>
            <td colspan="5">
              <a-checkbox-group v-model="checkboxgroupvalue">
                <a-checkbox
                  v-for="(value,key) in shouxuList"
                  :key="key"
                  :value="value"
                  disabled
                >{{ value }}
                </a-checkbox>
              </a-checkbox-group>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">原车装备</td>
            <td colspan="5">
              <a-checkbox-group v-model="checkboxgroupvalue2">
                <a-checkbox
                  v-for="(value,key) in zhuangbeiList"
                  :key="key"
                  :value="value"
                  disabled
                >{{ value }}
                </a-checkbox>
              </a-checkbox-group>
            </td>
          </tr>
<!--          <tr>-->
<!--            <td style="text-align: center;">备注</td>-->
<!--            <td colspan="5">{{ model.remarks }}</td>-->
<!--          </tr>-->
        </table>
        <div style="display: flex; justify-content: space-between;">
          <span>修改日期：{{ model.updateTime }}</span>
          <span>修改人：{{ model.updateUser }}</span>
        </div>
      </a-form>
    </a-spin>
    <a-modal :footer="null" :visible="previewVisible" @cancel="handlePreviewCancel">
      <img :src="previewImage" alt="example" style="width: 100%"/>
    </a-modal>
  </j-modal>
</template>
<script>
import { getAction } from '@/api/manage'

export default {
  name: 'VehicleRegisterModelTable',
  data() {
    return {
      title: '车辆入库登记表',
      visible: false,
      model: {},
      confirmLoading: false,
      form: this.$form.createForm(this),
      url: {
        brandList: '/sale/cxmSaleBaseInfo/queryByTypes',
        loadImg: 'cxm/cxmCommonBusiness/downloadPlainText'
      },
      previewVisible: false,
      previewImage: '',
      fileList1: [
        {
          uid: '-1',
          name: '外观图片',
          status: 'done',
          url: ''
        }
      ],
      fileList2: [
        {
          uid: '-1',
          name: '二维码图片',
          status: 'done',
          url: ''
        }
      ],
      fileList3: [
        {
          uid: '-1',
          name: '铭牌图片',
          status: 'done',
          url: ''
        }
      ],
      fileList4: [
        {
          uid: '-1',
          name: '合格证图片',
          status: 'done',
          url: ''
        }
      ],
      appearanceImg: '',
      qrCodeImg: '',
      nameplateImg: '',
      certificateImg: '',
      shouxuList: [],
      zhuangbeiList: [],
      checkboxgroupvalue: [],
      checkboxgroupvalue2: []
    }
  },
  created() {
    getAction(this.url.brandList + '?dataTypes=6,7').then((res) => {
      for (let i = 0; i < res.result['6'].length; i++) {
        this.shouxuList.push(res.result['6'][i].name)
      }
      for (let i = 0; i < res.result['7'].length; i++) {
        this.zhuangbeiList.push(res.result['7'][i].name)
      }
    })

  },
  methods: {
    handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = this.fileList1[0].url
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    edit(record) {
      this.confirmLoading = true
      this.model = record
      let imgList = []

      if (this.model.appearanceImg) {
        imgList.push(this.model.appearanceImg)
      } else {
        this.fileList1[0].name = '暂无 外观图片'
        imgList.push('')
      }

      if (this.model.qrCodeImg) {
        imgList.push(this.model.qrCodeImg)
      } else {
        this.fileList2[0].name = '暂无 二维码图片'
        imgList.push('')
      }

      if (this.model.nameplateImg) {
        imgList.push(this.model.nameplateImg)
      } else {
        this.fileList3[0].name = '暂无 铭牌图片'
        imgList.push('')
      }

      if (this.model.certificateImg) {
        imgList.push(this.model.certificateImg)
      } else {
        this.fileList4[0].name = '暂无 合格证图片'
        imgList.push('')
      }

      console.log(imgList)
      if(imgList.toString() == ',,,'){
        imgList = ['']
      }
      getAction('/cxm/cxmCommonBusiness/downloadPlainMultiText?ids=' + imgList).then((res) => {
        console.log(res)
        if (res.success) {
          this.confirmLoading = false
          for (let i in res.result) {
            if (imgList.indexOf(res.result[i].id) !== -1) {
              console.log('存在该图片，id为'+res.result[i].id+'，当前id处于fileList'+ (imgList.indexOf(res.result[i].id)+1) +'位置')
              let postion = imgList.indexOf(res.result[i].id)+1
              this['fileList'+ postion][0].url = res.result[i].img
            }
          }
        }else{
          this.confirmLoading = false
        }
      })
      this.visible = true
      if (record.accessoriesId) {
        this.checkboxgroupvalue = record.accessoriesId.split(',')
      }
      if (record.originalEquipmentId) {
        this.checkboxgroupvalue2 = record.originalEquipmentId.split(',')
      }

      if (this.model.id) {
        getAction('/sale/cxmSaleCarInfo/queryById?id=' + this.model.id).then((res) => {
          if (res.success) {
            this.model.supplier = res.result.supplier
            this.model.manufacturer = res.result.manufacturer
            this.model.storeName = res.result.storeName
            this.model.storekeeperName = res.result.storekeeperName
          }
        })
      }

    },
    handleCancel() {
      this.$emit('close')
      this.visible = false
      this.fileList1[0].url = ''
      this.fileList2[0].url = ''
      this.fileList3[0].url = ''
      this.fileList4[0].url = ''
    },
    handlePreviewCancel() {
      this.previewVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
.table {
  width: 100%;
}

.table tr td {
  height: 30px;
  border: 1px solid #000;
}

/deep/ .ant-upload-list-item {
  width: 200px;
  height: 130px;
}

///deep/ .ant-modal {
//  width: 1000px;
//}
</style>